import React, { useCallback } from 'react'
import love from '@/assets/fonts/love.svg'
import search from '@/assets/fonts/search.svg'
import { PlayList, Songs } from '@/modules/MusicList'
import { transTime } from '@/utils/time'
import { useDispatch, useSelector } from 'react-redux'
import { getMusicUrl } from '@/utils/api'
import { useAudioContext } from '@/views/Audio/Audio' 
import { Music } from '@/modules/Music'
import { saveOldSongs } from '@/store/musicList'
import { RootState } from '@/modules/RootState'
import vip from '@/assets/fonts/music/vip.svg'
import mv from '@/assets/fonts/music/mv.svg'
import { useNavigate } from 'react-router-dom'

function ContentMyLoveMusicMain({songs,song}:{songs:Songs[],song:PlayList}) {
  const dispatch = useDispatch()
  const audioDispatch = useAudioContext()
  const navigate = useNavigate()

  /* 获取音乐地址，并且进行播放音乐 */
  const getMusic = async (id:number,index:number) =>{
    let data =await (dispatch as any)(getMusicUrl(id))

    // console.log('========')
    // console.log(data)
    // console.log(index)

    const keys = {
      payload:data.payload,
      index:index
    }

    audioDispatch.playMusic(keys)
    dispatch(saveOldSongs(-1))
  }

  const goToMv = useCallback((e: any,id:number)=>{
    e.preventDefault()
    navigate(`/mv?id=${id}`,{state:id})
  },[])

  return (
    <div className='loveMusicMain'>
        <div className='loveMusicMain2'>
          <ul>
            <li>歌曲列表</li>
            <li>评论(0)</li>
            <li>收藏者</li>
          </ul>
          <div className='input1'>
            <input type="text" placeholder='搜索歌单音乐'/>
            <div className='input2'>
              <img src={search} alt="" />
            </div>
          </div>
        </div>
        <div className='loveMusicMain3'>
          <ul>
            <li></li>
            <li>操作</li>
            <li>标题</li>
            <li>歌手</li>
            <li>专辑</li>
            <li>时间</li>
          </ul>
          {
            songs.map((item,index)=>{
              return(
                <ul 
                  key={index} 
                  onClick={()=>getMusic(item.id,index)} 
                  style={{backgroundColor:item.id == audioDispatch.audioId ? 'rgb(196, 196, 196)' : ''}}
                >
                  <li>
                    <p>
                      {index+1}
                    </p>
                  </li>
                  <li>
                    <img src={love} alt="" />
                  </li>
                  <li>
                    <p style={{display:'flex', alignItems:'center'}}>
                      {item.name}
                      {
                        item.fee == 1
                        &&
                        <img src={vip} alt="" style={{height:'25px',width:'25px',marginLeft:'10px'}}/>
                      }
                      {
                        item.mv != 0
                        &&
                        <img src={mv} alt="" style={{height:'25px',width:'25px',marginLeft:'5px'}} onClick={(e)=>goToMv(e,item.mv)}/>
                      }
                    </p>
                   </li>
                  <li>
                    {
                      item.ar.map((item2,index2)=>{
                        return(
                          <p key={index2}>
                            {
                                index2 >= 1 ? `/${item2.name}` : item2.name
                            }
                          </p>
                        )
                      })
                    }
                  </li>
                  <li>
                    <p>
                      {
                        item.al.name
                      }
                    </p>
                  </li>
                  <li>
                    <p>
                      {
                        transTime(item.dt)
                      }
                    </p>
                  </li>
                  </ul>
              )
            })
          }
        </div>
    </div>
  )
}

export default React.memo(ContentMyLoveMusicMain)